<template lang="html">
  <div  class="future" >
    <Headbar :title="title"></Headbar>
    <div class="today">
      <div   class="today_title" @click="change()">{{ area }}</div>

      <div class="today_time">{{ time }}</div>
      <div class="today_ganmao">{{result.ganmao}}</div>
      <div v-if="result.forecast" class="today_type">
        {{ result.forecast[0].type+' '+result.forecast[0].fengxiang }}
      </div>

    </div>
    <span class="today_wendu">{{ result.wendu+'℃'}}</span><br/>
    <div class="wendu_wrap">
      <div class="wendu" v-for="item in result.forecast">
        <h6>{{ item.date }}</h6>
        <h6>{{ item.high }}</h6>
        <h6>{{ item.low }}</h6>
        <h6>{{ item.type }}</h6>
        <h6>{{ item.fengxiang }}</h6>
      </div>
    </div>
    <Demo :trsnfer="getinfo" v-if="bol" :class="{'cityleft' :bol}"></Demo>

  </div>

</template>

<script>
import Vue from 'vue'
import VueResource from 'vue-resource'
import Headbar from './head'
import Demo from './demo'
var time;
function fDate() {

  var date = new Date();
  var mon = date.getMonth() + 1;
  var d = date.getDate();
  var h = date.getHours();
  var m = date.getMinutes();
  // var s = date.getSeconds();
  var fmt = mon+'/'+d+','+h+':'+m;
  return fmt;

};
setInterval(fDate,100)
var time = fDate();
export default {
  data(){
      return {
          area:'北京市',
          result:{},
          time,
          title:'中国天气',
          bol:false,
          info:{}

      }
  },
  methods:{
    change(){
      // this.$router.push({
      //   path:'/weather/city'
      // })
      // cityPicker.show();
      this.bol=!this.bol;
    },
    getinfo(msg){
      this.info=msg;
      console.log(111);
      this.area = msg.name;
      console.log(msg.name);
    }
  },
  created(){
      // 在实例被创建后，调用网络请求方法请求数据
      this.axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.area).then(data => {
          // 把请求到的数据交给该实例的属性
          // this.today = data.data.data;
          this.result = data.data.data;

          console.log(data.data.data);
      })
  },
  components:{
    Headbar,
    Demo
  },
  watch:{
    area(){
      this.axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.area).then(data => {
          // 把请求到的数据交给该实例的属性
          this.result = data.data.data;

          console.log(data.data.data);
      })


    }
  }

}
</script>

<style lang="css" scoped>
.future{
  text-align: left;
  /*background-image: url(../../static/images/weather_bg.jpg);*/
  /*background-color: black;*/
  color: white;
}

.today_title{
  text-align: left;
  font-size: 4rem;
  padding-left: 3rem;
}
.today_time{
  text-align: left;
  font-size: 1.7rem;
  padding-left: 3rem;
  display: inline-block;
}
.today_wendu{
  display: inline-block;

  font-size: 10em;
}
.today_ganmao{
  padding-top: 8rem;
  font-size: 1.4rem;
  width: 30%;
  margin-left: 60%;
}
.today_type{
  font-size: 3.4rem;
  margin-left: 3rem;
}
.wendu_wrap{
  display: flex;
  justify-content: space-around;
}
  .wendu{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .future{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background-image: linear-gradient(to top,lightgray,purple);
    z-index: 10;
  }
  .cityleft{
    left: 0;
  }
</style>
